<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:350px;height:350px;position: relative;}

        .middleBox{width:350px;height:350px;position: relative;}
        .middleBox span{position:absolute;left:0;top:0;background:rgba(255,100,100,0.6);display:none;}
        .middleBox em{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1}

        .bigBox{width:350px;height:350px;position:absolute;left: 400px;top:0;overflow: hidden;display:none;}
        .bigBox img{position:absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box">
        <div class="showBox">
            <div class="middleBox">
                <img src="./imgs/m0.jpg" alt="">
                <span></span>
                <em></em>
            </div>
        </div>
        <div class="bigBox">
            <img src="./imgs/l0.jpg" alt="">
        </div>
    </div>
</body>
<script>

    // 玫瑰班有56名小朋友，开学大扫除，有23名小朋友参与。向日葵班有41人，请问应出多少人，才能和玫瑰班的比例大致相同（忽略小数点）

    // OOA：等比例移动实现放大镜
    // 1. 选择元素
    // 2. 绑定事件
        // 进入
            // 3. 显示
            // 4. 计算右侧显示区域的比例
            // 5. 根据比例，计算遮罩层的尺寸
        // 离开
            // 6. 隐藏
        // 移动
            // 7. 遮罩层跟随鼠标移动（简易拖拽）
                // ...
            // 8. 根据遮罩层移动的距离，计算移动比例
            // 9. 根据计算出来的比例，计算右侧大图需要移动的距离

    // OOD
    // function SmallToBig(){}
    // SmallToBig.prototype.xxx = function(){}
    // new SmallToBig();

    // OOP
    function SmallToBig(){
        // 1. 选择元素
        this.mBox = document.querySelector(".middleBox");
        this.mImg = document.querySelector(".middleBox img");
        this.mSpan = document.querySelector(".middleBox span");
        this.bBox = document.querySelector(".bigBox");
        this.bImg = document.querySelector(".bigBox img");

        
        // 2. 绑定事件
        this.addEvent();
    }
    SmallToBig.prototype.addEvent = function(){
        const that = this;
        // 进入
        this.mBox.addEventListener("mouseover", function(){
            // 3. 显示
            that.show()
        })
        // 离开
        this.mBox.addEventListener("mouseout", function(){
            // 4. 隐藏
            that.hide()
        })
        // 移动
        this.mBox.addEventListener("mousemove", function(){
            // 5. 移动
            that.move()
        })
    }
    SmallToBig.prototype.show = function(){
        // 显示
        this.mSpan.style.display = "block";
        this.bBox.style.display = "block";
        console.log("dom元素被display:none了，js无法获取css尺寸，所以...");
        // 3.1 提前获取各种尺寸，保存到实例的属性
        this.getSize();
        // 3.2 根据各种元素的尺寸，计算遮罩层的实际大小
        this.mSpan.style.width = this.bBoxW / this.bImgW * this.mBoxW + "px";
        this.mSpan.style.height = this.bBoxH / this.bImgH * this.mBoxH + "px";
    }
    SmallToBig.prototype.getSize = function(){
        // 各种元素的尺寸
        this.bBoxW = this.bBox.offsetWidth;
        this.bBoxH = this.bBox.offsetHeight;
        this.bImgW = this.bImg.offsetWidth;
        this.bImgH = this.bImg.offsetHeight;
        this.mBoxW = this.mBox.offsetWidth;
        this.mBoxH = this.mBox.offsetHeight;
    }
    SmallToBig.prototype.hide = function(){
        // 隐藏
        this.mSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    SmallToBig.prototype.move = function(eve){
        const e = eve || window.event;
        // 计算移动的距离
        let l = e.offsetX - this.mSpan.offsetWidth/2;
        let t = e.offsetY - this.mSpan.offsetHeight/2;
        // 边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.mBoxW-this.mSpan.offsetWidth){
            l=this.mBoxW-this.mSpan.offsetWidth;
        }
        if(t>this.mBoxH-this.mSpan.offsetHeight){
            t=this.mBoxH-this.mSpan.offsetHeight;
        }
        // 设置给遮罩层
        this.mSpan.style.left = l + "px";
        this.mSpan.style.top = t + "px";
        // 根据移动的距离计算比例
        const x = l / (this.mBoxW-this.mSpan.offsetWidth);
        const y = t / (this.mBoxH-this.mSpan.offsetHeight);
        // 根据比例，计算右侧大图要移动的距离（注意反向）
        this.bImg.style.left = - x * (this.bImgW-this.bBoxW) + "px";
        this.bImg.style.top = - y * (this.bImgH-this.bBoxH) + "px";
    }
    
    new SmallToBig();

    
</script>
</html>